<script setup lang="ts">
  import { Toast } from 'vant'
  import {inject,reactive} from 'vue'
  import {contractGradeEdit} from '@/api/contract'
  const {closeEvaluation} = inject('popup')
  const state = reactive({
    value: '',
    evalType: ''
  })
  const props = defineProps({
    num: {
        type: String
    },
    id: {
        type: String
    }
  })
  const setProgressGrade = async () =>{
    if(!state.evalType){
        Toast('请选择评估状态')
        return
    }
    if(!state.value){
        Toast('请输入具体描述')
        return
    }
    const res = await contractGradeEdit({
        "contract_state": state.evalType,
        "contract_stage": state.value,
        "contract_id": props.id,
        "num": props.num
    })
    if(res){
        Toast('评估成功')
        closeEvaluation(true)
    }else{
        Toast('评估失败')
    }
  }
  const evalTypeClick = (type) => {
    state.evalType = type
  }
  const numText = ["零","一","二","三","四"]
</script>
<template>
    <van-nav-bar title="进度评估" left-arrow @click-left="closeEvaluation(false)"/>
    <div class="eval-cont">
        <h3>第{{numText[props.num]}}阶段</h3>
        <p>
            <span @click="evalTypeClick(1)" :class="state.evalType == 1?'active':''">通过</span>
            <span @click="evalTypeClick(2)" :class="state.evalType == 2?'active':''">有风险</span>
            <span @click="evalTypeClick(3)" :class="state.evalType == 3?'active':''">问题严重</span>
        </p>
        <van-field
            v-model="state.value"
            rows="8"
            autosize
            label=""
            type="textarea"
            maxlength="500"
            placeholder="具体描述"
            show-word-limit
            class="eval-field"
        />
    </div>
    <button class="wy-submit" @click="setProgressGrade()">提交评估</button>
</template>
<style scoped>
    .wy-submit{
        position: static;
    }
    .eval-field{
        border: 1px solid #D5D3D3;
        margin-bottom: 1.49rem;
    }
    .eval-cont{
        padding: 1.28rem 0.56rem;
    }
    h3{
        font-size: 0.8rem;
        line-height: 0.8rem;
        font-weight: 500;
        color: #333333;
        margin-bottom: 0.88rem;
    }
    p{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.8rem;
    }
    p span{
        width: 5.92rem;
        height: 1.41rem;
        text-align: center;
        line-height: 1.41rem;
    }
    p span:nth-child(1){
        background: #ffffff;
        border: 1px solid #50D400;
        color:#50D400;
    }
    p span:nth-child(1).active{
        background: #50D400;
        color:#ffffff;
    }
    p span:nth-child(2){
        background: #ffffff;
        border: 1px solid #FE9215;
        color: #FE9215;
    }
    p span:nth-child(2).active{
        background: #FE9215;
        color:#ffffff;
    }
    p span:nth-child(3){
        background: #ffffff;
        border: 1px solid #FF0000;
        color: #FF0000;
    }
    p span:nth-child(3).active{
        background: #FF0000;
        color:#ffffff;
    }
</style>